<template>
  <div class="gate">
    <div class="gate-warpper">
			<div class="gate-tabs">
				<Tabs type="card" v-model="activeTab" :animated="false" @on-click="tabsClick">
					<TabPane label="水位曲线图" name="echart"></TabPane>
					<TabPane label="闸站信息" name="info"></TabPane>
					<TabPane label="非工程措施" name="measures"></TabPane>
				</Tabs>
			</div>
			<div class="gate-content">
				<div class="gate-echarts" v-show="activeTab === 'echart'">
					<div class="gate-nodata" v-show="!showEchart"></div>
					<div class="gate-echart" v-show="showEchart" ref="echart"></div>
				</div>

				<div class="gate-table" v-show="activeTab === 'info'">

					<div class="gate-table-dataIng">
						<base-title title="实时数据" height="24px" fontSize="14px"></base-title>

						<table class="table" border>
							<tr>
								<td>名称</td>
								<td colspan="3">{{fliterData('sluicegate_name')}}</td>
							</tr>
							<tr>
								<td>外江水位</td>
								<td>{{filterRealData('water_river_out')}}</td>
								<td>内江水位</td>
								<td>{{filterRealData('water_river_in')}}</td>
							</tr>
							<tr>
								<td>外江趋势</td>
								<td>{{filterRealData('outertrend')}}</td>
								<td>内江趋势</td>
								<td>{{filterRealData('innertrend')}}</td>
							</tr>
							<tr>
								<td>水泵状态</td>
								<td>{{filterRealData('pumpstatus')}}</td>
								<td>闸门状态</td>
								<td>{{filterRealData('gatestatus')}}</td>
							</tr>
							<tr>
								<td>数据时间</td>
								<td colspan="3">{{filterRealData('data_time')}}</td>
							</tr>
						</table>
					</div>
					<div class="gate-table-dataBase">
						<base-title title="基础数据" height="24px" fontSize="14px"></base-title>

						<table class="table" border>
							<tbody>
								<tr>
									<td>类型</td>
									<td colspan="3">{{fliterData('statypename')}}</td>
								</tr>
								<tr>
									<td>闸长</td>
									<td>{{filterRealData('dateroom_length')}}</td>
									<td>涵闸底板高程（m）</td>
									<td>{{filterRealData('board_height')}}</td>
								</tr>
								<tr>
									<td>内江极值</td>
									<td>{{fliterData('innerriverlimit')}}</td>
									<td>内江警戒值</td>
									<td>{{fliterData('innerriverwarn')}}</td>
								</tr>
								<tr>
									<td>外江极值</td>
									<td>{{fliterData('outerriverlimit')}}</td>
									<td>外江警戒值</td>
									<td>{{fliterData('outerriverwarn')}}</td>
								</tr>
								<tr>
									<td>河流</td>
									<td>{{fliterData('river')}}</td>
									<td>所在街镇</td>
									<td>{{fliterData('town')}}</td>
								</tr>
								<tr>
									<td>所在堤围</td>
									<td>{{fliterData('dick_name')}}</td>
									<td>堤围桩号</td>
									<td>{{fliterData('stake_no')}}</td>
								</tr>
								<tr>
									<td>所在河流</td>
									<td>{{fliterData('river')}}</td>
									<td>闸名</td>
									<td>{{fliterData('sluicegate_name')}}</td>
								</tr>
								<tr>
									<td>闸门数</td>
									<td>{{fliterData('gatenum')}}</td>
									<td>突变水位</td>
									<td>{{fliterData('mutation')}}</td>
								</tr>
								<tr>
									<td>泵数</td>
									<td>{{fliterData('pumpnum')}}</td>
									<td>闸站编号</td>
									<td>{{fliterData('stainfoid')}}</td>
								</tr>
								<tr>
									<td>闸站状态</td>
									<td>{{fliterData('stastatus')}}</td>
									<td>审核人</td>
									<td>{{fliterData('checkby')}}</td>
								</tr>
								<tr>
									<td>常态内江警戒水位</td>
									<td>{{fliterData('normal_alarm_level_in')}}</td>
									<td>常态外江警戒水位</td>
									<td>{{fliterData('normal_alarm_level_out')}}</td>
								</tr>
								<tr>
									<td>常态内江超限水位</td>
									<td>{{fliterData('normal_over_level_in')}}</td>
									<td>常态外江超限水位</td>
									<td>{{fliterData('normal_over_level_out')}}</td>
								</tr>
								<tr>
									<td>排水内江警戒水位</td>
									<td>{{fliterData('drain_alarm_level_in')}}</td>
									<td>排水外江警戒水位</td>
									<td>{{fliterData('drain_alarm_level_out')}}</td>
								</tr>
								<tr>
									<td>排水内江超限水位</td>
									<td>{{fliterData('drain_over_level_in')}}</td>
									<td>排水外江超限水位</td>
									<td>{{fliterData('drain_over_level_out')}}</td>
								</tr>
								<tr>
									<td>主管部门</td>
									<td>{{fliterData('governor')}}</td>
									<td>使用年限</td>
									<td>{{fliterData('durable_years')}}</td>
								</tr>
								<tr>
									<td>信息化设备</td>
									<td>{{fliterData('information_equipment')}}</td>
									<td>其他相关预案</td>
									<td>{{fliterData('other_plan')}}</td>
								</tr>
								<tr>
									<td>受影响人员数（人）</td>
									<td>{{fliterData('affected_population')}}</td>
									<td>地址</td>
									<td>{{fliterData('location')}}</td>
								</tr>
								<tr>
									<td>工程等级</td>
									<td>{{fliterData('project_level')}}</td>
									<td>建设时间</td>
									<td>{{fliterData('build')}}</td>
								</tr>
								<tr>
									<td>工程分类</td>
									<td>{{fliterData('project_type')}}</td>
									<td>历史最大过闸流量（m³/s）</td>
									<td>{{fliterData('history_flow')}}</td>
								</tr>
								<tr>
									<td>设计洪水标准（重现期）</td>
									<td>{{fliterData('design_flood')}}</td>
									<td>设计流量（m³/s）</td>
									<td>{{fliterData('design_flow')}}</td>
								</tr>
								<tr>
									<td>校核洪水标准（重现期）</td>
									<td>{{fliterData('check_flood')}}</td>
									<td>校核流量（m³/s）</td>
									<td>{{fliterData('check_flow')}}</td>
								</tr>
								<tr>
									<td>排涝区面积（m²）</td>
									<td>{{fliterData('drain_area')}}</td>
									<td>独立/联合负责排涝区</td>
									<td>{{fliterData('drain_region')}}</td>
								</tr>
								<tr>
									<td>群众转移方案是否编制</td>
									<td>{{fliterData('have_tranfer_plan')}}</td>
									<td>联系电话</td>
									<td>{{fliterData('contact')}}</td>
								</tr>
								<tr>
									<td>设计标准</td>
									<td>{{fliterData('design_standard')}}</td>
									<td>防洪预案是否编制</td>
									<td>{{fliterData('have_emergency_plan')}}</td>
								</tr>
								<tr>
									<td>历史最高水位(米)</td>
									<td>{{fliterData('hightest_depth')}}</td>
									<td>历史最高水位发生时间(年、月、日)</td>
									<td>{{fliterData('hightest_time')}}</td>
								</tr>
								<tr>
									<td>建设(重建)(加固)时间</td>
									<td>{{fliterData('rebuild_time')}}</td>
									<td>设计流量(m3/s)</td>
									<td>{{fliterData('flow')}}</td>
								</tr>
								<tr>
									<td>设计启闭水头差(米)</td>
									<td>{{fliterData('waterhead')}}</td>
									<td>闸门形式及材料</td>
									<td>{{fliterData('gate_material')}}</td>
								</tr>
								<tr>
									<td>闸门启闭形式</td>
									<td>{{fliterData('gate_form')}}</td>
									<td>闸底板高程(m)</td>
									<td>{{fliterData('board_height')}}</td>
								</tr>
								<tr>
									<td>孔数(个)</td>
									<td>{{fliterData('holes')}}</td>
									<td>每孔净宽(m)</td>
									<td>{{fliterData('hole_width')}}</td>
								</tr>
								<tr>
									<td>孔高 (米)</td>
									<td>{{fliterData('hole_height')}}</td>
									<td>闸室总长(m)</td>
									<td>{{fliterData('gateroom_length')}}</td>
								</tr>
								<tr>
									<td>船室净宽(m)</td>
									<td>{{fliterData('shiproom_width')}}</td>
									<td>船室总长(m)</td>
									<td>{{fliterData('shiproom_length')}}</td>
								</tr>
								<tr>
									<td>捍卫面积(亩)</td>
									<td>{{fliterData('defence_area')}}</td>
									<td>涵闸类型</td>
									<td>{{fliterType('sluicegate_type')}}</td>
								</tr>
								<tr>
									<td>纬度</td>
									<td>{{fliterData('lat')}}</td>
									<td>经度</td>
									<td>{{fliterData('lng')}}</td>
								</tr>
								<tr>
									<td>设计闸前水位（m）</td>
									<td>{{fliterData('design_gatebefore_level')}}</td>
									<td>设计闸后水位（m）</td>
									<td>{{fliterData('design_gateafter_level')}}</td>
								</tr>
								<tr>
									<td>校核闸前水位（m）</td>
									<td>{{fliterData('check_gatebefore_level')}}</td>
									<td>校核闸后水位（m）</td>
									<td>{{fliterData('check_gateafter_level')}}</td>
								</tr>
								<tr>
									<td>通航能力（吨）</td>
									<td colspan="3">{{fliterData('navigation_capacity')}}</td>
								</tr>
								<tr>
									<td>备注</td>
									<td colspan="3">{{fliterData('note')}}</td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>

				<div class="gate-measures" v-show="activeTab === 'measures'">
					<div class="gate-measures-data">
						<div>
							<base-title title="安全综合评价" height="24px" fontSize="14px"></base-title>
						</div>
						<table class="table" border>
							<tbody>
								<tr>
									<td rowspan="3">
										安全综合评价
									</td>
									<td>是否进行过安全综合评价</td>
									<td colspan="4">{{fliterDouData('"sefety_evaluation."be_checked')}}</td>
								</tr>
								<tr>
									<td>时间</td>
									<td colspan="2">主要结论</td>
									<td colspan="2">安全类别</td>
								</tr>
								<tr>
									<td>{{fliterDouData('"sefety_evaluation."heck_date')}}</td>
									<td colspan="2">{{fliterDouData('"sefety_evaluation."result')}}</td>
									<td colspan="2">{{fliterDouData('"sefety_evaluation."safety_type')}}</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div class="gate-measures-data">
						<div>
							<base-title title="防汛责任制" height="24px" fontSize="14px"></base-title>
						</div>
						<table class="table" border>
							<tbody>
								<tr>
									<td class="key"></td>
									<td class="key">防汛行政责任人</td>
									<td class="key">防汛技术责任人</td>
									<td class="key">管理单位负责人</td>
								</tr>
								<tr>
									<td class="key">姓名</td>
									<td class="key">{{fliterDouData('administrator.name')}}</td>
									<td class="key">{{fliterDouData('technical_director.name')}}</td>
									<td class="key">{{fliterDouData('operator.name')}}</td>
								</tr>
								<tr>
									<td class="key">单位</td>
									<td class="key">{{fliterDouData('administrator.department')}}</td>
									<td class="key">{{fliterDouData('technical_director.department')}}</td>
									<td class="key">{{fliterDouData('operator.department')}}</td>
								</tr>
								<tr>
									<td class="key">职务</td>
									<td class="key">{{fliterDouData('administrator.duty')}}</td>
									<td class="key">{{fliterDouData('technical_director.duty')}}</td>
									<td class="key">{{fliterDouData('operator.duty')}}</td>
								</tr>
								<tr>
									<td class="key">电话</td>
									<td class="key">{{fliterDouData('administrator.telephone')}}</td>
									<td class="key">{{fliterDouData('technical_director.telephone')}}</td>
									<td class="key">{{fliterDouData('operator.telephone')}}</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div class="gate-measures-data">
						<div>
							<base-title title="应急抢险" height="24px" fontSize="14px"></base-title>
						</div>
						<table class="table" border>
							<tbody>
								<tr>
									<td class="key center" rowspan="3">抢险队伍</td>
									<td class="key center" rowspan="2">人数（人）</td>
									<td class="center" colspan="2">负责人</td>
									<td class="center" colspan="2">联系人</td>
								</tr>
								<tr>
									<td class="center">姓名</td>
									<td class="center">电话</td>
									<td class="center">姓名</td>
									<td class="center">电话</td>
								</tr>
								<tr>
									<td class="center">{{fliterDouData('emergency_team.headcount')}}</td>
									<td class="center">{{fliterDouData('emergency_team.director')}}</td>
									<td class="center">{{fliterDouData('emergency_team.director_telephone')}}</td>
									<td class="center">{{fliterDouData('emergency_team.contacts')}}</td>
									<td class="center">{{fliterDouData('emergency_team.contact_number')}}</td>
								</tr>

								<tr>
									<td class="key center" rowspan="3">防汛抢险物资储备现状情况</td>
									<td class="center">袋类（条）</td>
									<td class="center">土工布(m²)</td>
									<td class="center">砂石(m³)</td>
									<td class="center">块石(m³)</td>
									<td class="center">救生衣(件)</td>
								</tr>
								<tr>
									<td class="center">{{fliterDouData('warehouse_statistics.bag')}}</td>
									<td class="center">{{fliterDouData('warehouse_statistics.cloth')}}</td>
									<td class="center">{{fliterDouData('warehouse_statistics.sand')}}</td>
									<td class="center">{{fliterDouData('warehouse_statistics.block_stone')}}</td>
									<td class="center">{{fliterDouData('warehouse_statistics.life_jacket')}}</td>
								</tr>
								<tr>
									<td class="key">存放点与工程距离(m)</td>
									<td class="center" colspan="4">{{fliterDouData('warehouse_statistics.distance')}}</td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
			</div>
		</div>
		<loading v-show="showLoading"></loading>
  </div>
</template>

<script>
  import axios from 'axios'
  import echarts from 'echarts'
  import Loading from './loading'
  import baseTitle from './base-title'
  import { WateringLevel } from './echarts'

  export default {
    props: {
      api: {
        type: String,
        default: 'http://183.238.82.216:9080/fullservice/http/waterDataReal?stn_no=3060'
      }
    },
    components: {
      loading: Loading,
      'base-title': baseTitle
    },
    created () {
      this.echart = null
    },
    mounted () {
      this._getInfo()
    },
    data () {
      return {
        activeTab: 'echart',
        showLoading: false,
        showEchart: false,
        data: {}
      }
    },
    methods: {
      fliterData (key) {
        if (this.data[key] === 0) {
          return this.data[key]
        }
        return this.data[key] || '--'
      },
      fliterDouData (key) {
        let arr = key.split('.')

        if (this.data[arr[0]] === undefined) {
          this.data[arr[0]] = {}
        }

        return this.data[arr[0]][arr[1]] || '--'
      },
      fliterStatus (key) {
        if (this.data[key] === 1) {
          return '正常'
        } else {
          return '停用'
        }
      },
      fliterType (key) {
        let str = ''
        switch (this.data[key]) {
          case '1':
            str = '中型水闸'
            break
          case '2':
            str = '中型船闸'
            break
          case '3':
            str = '小型窦闸'
            break
          case '4':
            str = '电排站穿堤涵管'
            break
          default:
            str = '--'
            break
        }
        return str
      },
      tabsClick (name) {
        if (!this.echart) {
          return
        }

        if (name === 'echart') {
          this.$nextTick(() => {
            this.echart.resize()
          })
        }
      },
      filterRealData (key) {
        return this.data.realtime_data ? this.data.realtime_data[key] || this.data.realtime_data[key] === 0 ? this.data.realtime_data[key] : '--' : '--'
      },
      initEchart (data) {
        if (!data) {
          return
        }
        this.showEchart = true
        setTimeout(() => {
          if (!this.echart) {
            this.echart = echarts.init(this.$refs.echart)
          }
          this.echart.setOption(new WateringLevel(data).echartData)
        }, 20)
      },
      _getInfo () {
        this.data = {}
        this.showLoading = true
        axios.get(this.api, {})
          .then(result => {
            const res = result.data
            let data = null
            if (res.code === '0000' && res.result.length) {
              let info = res.result.reverse()
              Object.assign(this.data, {
                outerriver: info[0].water_river_out,
                innerriver: info[0].water_river_in,
                outerrivertrend: info[0].outertrend,
                innerrivertrend: info[0].innertrend,
                pumpstatus: info[0].pumpstatus,
                gatestatus: info[0].gatestatus,
                data_time: info[0].data_time
              })

              let time = []
              let inner = []
              let outer = []
              info.map(item => {
                let str = item.data_time
                str = str.split(' ').join('\n')
                time.push(str)
                inner.push(item.water_river_in)
                outer.push(item.water_river_out)
              })
              data = {
                x: time,
                inner: inner,
                outer: outer
              }
            }
            this.initEchart(data)
            this.showLoading = false
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .gate {
    width: 100%;
    height: 100%;
    .gate-warpper {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			.gate-tabs {
				position: absolute;
				left: 5px;
				right: 5px;
				top: 5px;
			}
			.gate-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 40px;
				bottom: 0;
				.gate-echarts {
					width: 100%;
					height: 100%;
					margin: auto;
					overflow: hidden;
					padding: 5px;
					.gate-echart {
						width: 100%;
						height: 100%;
					}
					.gate-nodata {
						width: 100%;
						height: 100%;
						text-align: center;
						background-image: url("./img/aPictureNoCount.png");
						background-position: center 35%;
						background-repeat: no-repeat;
					}
				}
				.gate-table {
					width: 100%;
					height: 100%;
					padding: 5px;
					overflow: auto;
					.table {
						width: 100%;
						margin: auto;
						font-size: 14px;
						border: 1px solid #ddd;
						margin: 5px 0;
						td {
							padding: 5px;
						}
					}
				}
				.gate-measures {
					width: 100%;
					height: 100%;
					padding: 5px;
					overflow: auto;
					.gate-measures-data {
						margin-bottom: 10px;
						.table {
							width: 100%;
							margin: auto;
							font-size: 14px;
							border: 1px solid #ddd;
							margin: 5px 0;
							td {
								padding: 5px;
							}
						}
					}
				}
			}
		}
  }
</style>

